<template>
  <div class="shop">
    <header-view
      style="position: fixed; top: 0; width: 100%; z-index: 200"
    ></header-view>
    <div class="heading" style="margin-top: 70px">
      <h3>我们的团队</h3>
      <div class="linkHome">
        <span class="linkStyle" @click="toHome">主页</span> /
        <span class="normalFont">团队</span>
      </div>
    </div>
    <div class="shop-container">
      <div class="titled">
        <div class="title">
          <span>我们的队伍</span>
          <el-link href="#" type="primary" :underline="false"
            >查看更多 >></el-link
          >
        </div>
      </div>
      <div class="teamList-box">
        <div class="teamList" v-for="item in teamList" :key="item.id">
          <div class="share">
            <a href="#" class="fab fa-facebook-f"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-pinterest"></a>
            <a href="#" class="fab fa-instagram"></a>
          </div>
          <div class="image">
            <img :src="item.imgSrc" alt="" />
          </div>
          <div class="user">
            <h3>{{ item.designName }}</h3>
            <span>{{ item.position }}</span>
          </div>
        </div>
      </div>
    </div>
    <footer-view></footer-view>
  </div>
</template>

<script>
import Img1 from "../../assets/image/team-1.jpg";
import Img2 from "../../assets/image/team-2.jpg";
export default {
  data() {
    return {
      teamList: [
        { imgSrc: Img1, designName: "John Deo", position: "Designer" },
        { imgSrc: Img2, designName: "Adeline Adele", position: "manager" },
      ],
    };
  },
  setup() {},
  methods: {
    toHome() {
      this.$router.push({ path: "/home" });
    },
  },
};
</script>

<style lang="scss">
.shop {
  background-color: #fff;
}
.teamList-box {
  display: flex;
  justify-content: flex-start;
  padding: 0 150px 20px 150px;
  flex-wrap: wrap;
  width: 100%;
  .teamList {
    position: relative;
    overflow: hidden;
    height: 552px;
    width: 364px;
    border: 1px solid #244d4d;
    margin: 0 10px;
    &:hover {
      .share {
        top: 0;
        left: 0;
        visibility: inherit;
      }
    }
    .share {
      z-index: 10;
      position: absolute;
      top: -1.5px;
      left: -71px;
      height: 500px;
      width: 70px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #244d4d;
      visibility: hidden;
      a {
        height: 50px;
        width: 50px;
        border: 1px solid #fff;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px 0;
        font-size: 20px;
        &:hover {
          background-color: #fff;
          color: #244d4d;
        }
      }
    }
    .image {
      height: 500px;
      width: 100%;
      overflow: hidden;
      position: relative;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        &:hover {
          transform: scale(1.1);
        }
      }
    }
    .user {
      height: 52px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      h3 {
        font-size: 16px;
        color: #244d4d;
        font-weight: bold;
      }
      span {
        font-size: 14px;
        color: #779;
      }
    }
  }
}
</style>
